<template>
  <div id="echartsProvince"></div>
</template>

<script>
import { getToday,dateFormatString,dateFormatFullString } from "@/util/util";
export default {
  name: 'echartsMap',

  data () {
    return {
      datas:[],
      oneInterval : 5 * 60 * 1000,
      value:Math.random() * 1000,
      myChart:{},
      timer:null,
      firstStartUp:true,
    }
  },
  beforeMount(){
    
  },
  mounted(){
    this.initEchartsMap();
    this.setTimer();
  },
  methods: {
        initEchartsMap() {
            this.myChart = this.$echarts.init(document.getElementById('echartsProvince'));

            this.myChart.setOption({
                title: {
                    text: '瞬时流量累加值'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        console.log(params);
                        params = params[0];
                        var date = new Date(params.name);
                        return date.getHours() + ':' + date.getMinutes()+ ':' + date.getSeconds() + ' - ' + params.value[1];
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'time',
                    splitLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    }
                },
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data:this.datas
                }]
            });

            
        },
        setTimer(){
            this.timer = setInterval( ()=> {
                this.getLastedData();
            }, 1000); 
        },

        /*
        *获取最新的点数据，采用模拟数据进行展示，后期要获取后台实时数据
        */
        getLastedData(){
            //return this.getMockData(new Date())
            //this.datas.push( {name:'2018-09-05 01:01:01',value:['2018-09-05 01:01:01',400]});
            if(this.firstStartUp){
                var split = (new Date() - getToday())/this.oneInterval;
                let tempTime = getToday();
                for(var i=1;i<split;i++){
                    this.datas.push(this.getMockData(tempTime))
                    tempTime = new Date(tempTime.getTime() + this.oneInterval)
                }
                this.firstStartUp = false;
            }
            
            this.datas.push(this.getMockData(new Date()))
            this.myChart.setOption({
                series: [{
                    data: this.datas
                }]
            });
        },

        getTwoBitMinutes(time){
            if(time.getMinutes()<10)
                return '0'+time.getMinutes();
            else
                return time.getMinutes();
        },

        /**模拟某个时间点的数据*/
        getMockData(time){
            this.value = this.value + Math.random() * 21 - 10;
            return {
                name: dateFormatFullString(time),
                value: [
                    dateFormatFullString(time),
                    Math.round(this.value)
                ]
            }
        },
        // /**获取当日凌晨时间*/
        // getBeforeDawn(){
            
        //     return new Date(new Date().getTime()- (new Date().getHours()*60*60 + new Date().getMinutes()*60)*1000);
        // }
    }
        
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #echartsMap{
      width: 100%;
      height:100%;
      display: flex;
      align-items: center;        /* 垂直居中 */
      justify-content: center;    /* 水平居中 */
  }

  #echartsChina{
    width:80%;
    height:400px;
    border:1px solid black;
    display:block;
    
  }

  #echartsProvince{
    width:80%;
    height:400px;
    border:1px solid black;
    display:block;
  }
</style>